import React from 'react';
import { Button, Select, Table } from 'antd';

class ApiAndSlotReadOnly extends React.Component{
  render() {
    const { apiData,slotData,apiAndSlotData } = this.props;
    const columns = [
      {
        title: '词槽',
        dataIndex: 'slotKey',
        width: '30%',
        render:(text,record,index) =>
          slotData.length > 0 ? (
            <Select
              placeholder={'选择词槽'}
              value={text}
              style={{width:200}}
              disabled={true}
              key={'slotKey_'+index}
            >
              {
                slotData.map(slot => {
                  return <Select.Option value={slot.key ? slot.key : slot.keyName} key={slot.key ? slot.key : slot.keyName}>&lt;{slot.name}&gt;</Select.Option>
                })
              }
            </Select>
          ) : null
      },
      {
        title: 'API字段-请求字段',
        dataIndex: 'apiFieldId',
        render:(text, record,index) => (
          <Select
            placeholder={'选择API请求字段'}
            value={text}
            style={{width:200}}
            disabled={true}
            key={'apiFieldId_'+index}
          >
            {apiData.requestFields
              ? apiData.requestFields.map((api, index) => {
                return <Select.Option value={api.id} key={api.id}>#{api.name}#</Select.Option>;
              })
              : null}
          </Select>
        )
      }
    ];
    return (
      <div style={{margin:'10px 0px'}}>
        <div>词槽与字段的对应关系</div>
        <Table
          bordered
          dataSource={apiAndSlotData}
          columns={columns}
          pagination={false}
          rowKey={(record, index) => index}
        />
      </div>
    )
  }
}

export default ApiAndSlotReadOnly;
